<template>
  <div class="login">
    <zh-header :leftRouter="{name: 'home'}" :rightRouter="{name: 'forget'}" title="登录">
      <span slot="left">返回</span>
      <span slot="right">忘记密码?</span>
    </zh-header>

    <div class="form">
      <mt-field label="账号" placeholder="您的手机号"></mt-field>
      <mt-field label="密码" placeholder="请输入密码" type="password"></mt-field>
      <div class="action mt10r">
        <router-link :to="{name: 'register'}" class="item"><mt-button class="button btn-register">注册账号</mt-button></router-link>
        <mt-button class="item button btn-login">登录</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  import zhHeader from '@/components/Header'
  
  export default {
    components: {
      zhHeader
    }
  }
</script>

<style lang="stylus">
.login
  .action
    display: flex
    .item
      flex: 1
      margin: 0 .4rem
    .button
      color: white
      border: 1px solid #007FFF
      border-radius: 2px
      width: 100%
      &.btn-register 
        color: #007FFF
      &.btn-login
        background: #007FFF
</style>
